<template>
  <div class="wrap">
    <div class="wrap-top">
      <div class="wrap-top-box">
        <div class="top-all">
          <div class="top-line">
            <p>———</p>
            <p>———</p>
          </div>
          <P class="top-dayu">
            <span>订单已完成</span>
            <span>＞</span>
          </P>
          <p class="top-thanks">感谢您对汇方圆的信任，期待再次光临。</p>
          <p class="top-button">
            <span class="res">申请退款</span>
            <span class="more">再来一单</span>
          </p>
        </div>
      </div>
    </div>
    <div class></div>

    <div class="wrap-info">
      <div class="info-box">
        <div class="info-xm">
          <span class="info-xm1"></span>
          <span class="a1">骑手张小明</span>
        </div>
        <div class="info-img">
          <img src="/static/imgs_s04/07/phoon.png" alt />
        </div>
      </div>
    </div>
    <div class="wrap-huifamgyuan">
      <div class="hfy-box">
        <div class="hfy-on">
          <span></span>
          <h1>汇方圆</h1>
        </div>
        <div class="hfy-line"></div>
        <div class="hfy-zj">
          <!-- 预留图片位置 -->
          <div class="zj-img">
            <img src="/static/imgs_s04/01/s04_food1.png" alt="">
          </div>
          <div class="zj-text">
            <span>内蒙古烤羊肉串</span>
            <p>×1</p>
          </div>
          <p class="hfy-qian">￥36</p>
        </div>
        <div class="hfy-zj">
          <!-- 预留图片位置 -->
          <div class="zj-img">
            <img src="/static/imgs_s04/01/s04_food1.png" alt="">
          </div>
          <div class="zj-text">
            <span>内蒙古烤羊肉串</span>
            <p>×1</p>
          </div>
          <p class="hfy-qian">￥12</p>
        </div>
        <div class="hfy-line"></div>
        <div class="hfy-con">
          <div class="hfy-lef">
            <p>餐盒费</p>
            <p>配送费</p>
            <p>优惠券</p>
            <p>商家优惠</p>
          </div>
          <div class="hfy-righ">
            <p class="t1">￥2</p>
            <p class="t1">￥3</p>
            <p class="t2">￥-3</p>
            <p class="t2">￥-2</p>
          </div>
        </div>
        <div class="hfy-line"></div>
        <span class="hfy-af">已支付￥13</span>
        <span class="hfy-af-a">已支付:</span>
        <span class="hfy-af-b">￥30</span>
        <div class="hfy-line"></div>
        <div class="hfy-lianxi">
          <div class="hfy-botton">
            <img src="/static/imgs_s04/07/phoon.png" alt />
            <span>联系商家</span>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap-dress">
      <div class="dress-box">
        <div class="dress-con">
          <div class="dress-lef">
            <p>期望时间</p>
            <p>收货人</p>
            <p>收货地址</p>
          </div>
          <div class="dress-right">
            <p>立即配送</p>
            <p>
              <span>张磊</span>
              <span>15512356678</span>
            </p>
            <p class="dress-dre">河南省郑州市金水区中州大道农业路苏荷中心1926</p>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap-dress">
      <div class="dress-box">
        <div class="dress-con">
          <div class="dress-lef">
            <p>订单编号</p>
            <p>下单时间</p>
            <p>支付方式</p>
          </div>
          <div class="dress-right">
            <p>345 123 456 789</p>
            <p>2018-10-20-10:29</p>
            <p class="dress-dre">在线支付</p>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap-rema">
      <div class="rema-box">
        <p class="rema a">备注信息</p>
        <p class="rema b">不要辣椒 谢谢</p>
      </div>
    </div>
    <div class="wrap-eng">
      <div class="eng-box">
        <div class="eng-all">
          <img src="/static/imgs_s04/07/erphone.png" alt />
          <span>汇方圆外卖客服</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #eee;
  border: 1px solid #eee;
}

.wrap-top {
  width: 100%;
  height: 170px;
  margin-top: 10px;
}

.wrap-top-box {
  width: 375px;
  margin: 0 auto;
}

.top-all {
  width: 356px;
  height: 170px;
  background-color: #fff;
  margin: 0 auto;
}

.top-line {
  color: #d2d2d2;
  font-size: 16px;
  font-weight: 700;
}

.top-line p {
  line-height: 5px;
  font-size: 12px;
}

.top-line {
  text-align: center;
  margin-top: 10px;
}

.top-dayu {
  font-size: 21px;
  font-size: 500;
  color: #333333;
  text-align: center;
  margin-top: 20px;
}

.top-thanks {
  font-size: 12px;
  color: #333333;
  font-weight: 400px;
  text-align: center;
  margin-top: 20px;
}

.res {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  border: 1px solid #d6d7dc;
  padding: 10px 22px;
  border-radius: 2px;
}

.more {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background-color: #32b16c;
  border-radius: 2px;
  margin-left: 20px;
  padding: 10px 22px;
}

.top-button {
  text-align: center;
  padding-top: 20px;
}

.wrap-info {
  width: 375px;
  margin: 0 auto;
  margin-top: 10px;
}

.info-box {
  width: 356px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
}

.info-xm span {
  font-size: 14px;
  color: #333;
}

.info-xm1 {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  background-color: #eee;
  margin-top: 14px;
  margin-left: 10px;
}

.info-img img {
  width: 18px;
  height: 18px;
  margin-left: 184px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.a1 {
  margin-left: 10px;
  position: absolute;
  left: 48px;
  top: 25px;
}

.info-xm {
  width: 140px;
  position: relative;
}

.wrap-huifamgyuan {
  width: 375px;
  margin: 10px auto;
}

.hfy-box {
  width: 356px;
  margin: 0 auto;
  background-color: #fff;
}

.hfy-on span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: rgba(244, 244, 244, 1);
  border-radius: 3px;
  margin-left: 13px;
  margin-top: 19px;
}

h1 {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-left: 7px;
  margin-top: 18px;
}

.hfy-line {
  width: 329px;
  height: 1px;
  background: rgba(244, 244, 244, 1);
  margin: 15px auto;
}

.hfy-on {
  display: flex;
}
.zj-img {
  width: 45px;
  height: 45px;
  background-color: #ddd;
  margin-left: 15px;
}
.zj-img img {
  width: 45px;
  height: 45px;
}
.zj-text span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
}

.zj-text p {
  font-size: 13px;
  font-weight: 400;
  color: #666666;
  margin-top: 6px;
}

.hfy-zj {
  display: flex;
  margin-top: 10px;
}

.zj-text {
  line-height: 23px;
  margin-left: 10px;
}

.hfy-qian {
  font-size: 13px;
  font-weight: 500;
  color: #333333;
  margin-left: 139px;
  margin-top: 20px;
}

.hfy-con p {
  margin-top: 20px;
}

.hfy-con {
  display: flex;
}

.hfy-righ {
  margin-left: 242px;
}

.hfy-lef {
  margin-left: 20px;
}

.hfy-lef {
  font-size: 12px;
  font-weight: 400;
  color: #333333;
}

.t1 {
  font-size: 12px;
  font-weight: 400;
  color: #656565;
}

.t2 {
  font-size: 12px;
  font-weight: 400;
  color: #fa4f45;
}

.hfy-af {
  font-size: 13px;
  font-weight: 400;
  color: #a3a5a8;
  margin-left: 176px;
}

.hfy-af-a {
  font-size: 15px;
  color: #323232;
  font-weight: 500;
  margin-left: 10px;
}

.hfy-af-b {
  font-size: 15px;
  font-weight: 500;
  color: #fa4f45;
}

.hfy-lianxi img {
  width: 12px;
  height: 12px;
}

.hfy-lianxi span {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.hfy-botton {
  margin: 15px 140px;
  padding-bottom: 15px;
}

.wrap-dress {
  width: 375px;
  margin: 10px auto;
}

.dress-box {
  width: 356px;
  margin: 0 auto;
  background-color: #fff;
}

.dress-lef p {
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  margin-top: 20px;
  margin-left: 15px;
}

.dress-right p {
  font-size: 13px;
  font-weight: 400;
  color: #333;
  margin-top: 20px;
  margin-left: 30px;
}

.dress-con {
  display: flex;
  padding-bottom: 20px;
}

.dress-dre {
  width: 239px;
  height: 18px;
}

.wrap-rema {
  width: 375px;
  margin: 10px auto;
}

.rema-box {
  width: 356px;
  margin: 0 auto;
  background-color: #fff;
  line-height: 36px;
}

.rema {
  margin-left: 15px;
  font-size: 13px;
  font-weight: 400;
}

.a {
  color: #999999;
}

.b {
  color: #333;
}

.wrap-eng {
  width: 375px;
  margin: 10px auto;
}

.eng-box {
  width: 356px;
  margin: 0 auto;
  background-color: #fff;
}

.eng-all img {
  width: 14px;
  height: 15px;
}

.eng-all span {
  font-size: 13px;
  font-weight: 400;
  color: #333;
}

.eng-all {
  padding: 14px 122px;
}
</style>
